<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" href="#" type="image/png">

    <link rel="icon" href="../../images/hospital-icon.png" type="image/x-icon">  <!--在网页标题左侧显示图标-->
    <!--    <link rel="shortcut icon" href="./images/hospital-icon.png" type="image/x-svg">-->
    <link rel="shortcut icon" href="../../images/hospital-icon.png" type="image/x-icon"><!--在收藏夹显示图标-->

    <title>患者信息管理-门诊管理系统</title>

    <!--时间风格及输入框风格-->
    <!--pickers css-->
    <link rel="stylesheet" type="text/css" href="../../js/bootstrap-datepicker/css/datepicker-custom.css" />
    <link rel="stylesheet" type="text/css" href="../../js/bootstrap-timepicker/css/timepicker.css" />
    <link rel="stylesheet" type="text/css" href="../../js/bootstrap-colorpicker/css/colorpicker.css" />
    <link rel="stylesheet" type="text/css" href="../../js/bootstrap-daterangepicker/daterangepicker-bs3.css" />
    <link rel="stylesheet" type="text/css" href="../../js/bootstrap-datetimepicker/css/datetimepicker-custom.css" />

    <link href="../../css/style.css" rel="stylesheet">
    <link href="../../css/style-responsive.css" rel="stylesheet">
    <!--时间风格及输入框风格-->

    <!--data table-->
    <link rel="stylesheet" href="../../js/data-tables/DT_bootstrap.css" />

    <link href="../../css/style.css" rel="stylesheet">
    <link href="../../css/style-responsive.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="../../js/html5shiv.js"></script>
    <script src="../../js/respond.min.js"></script>
    <![endif]-->
</head>

<body class="sticky-header">

<section>
    <!-- left side start-->
    <!--左侧开始-->
    <div class="left-side sticky-left-side">

        <!--logo and iconic logo start-->
        <!--侧边栏顶部图标+文字-->
        <div class="logo">
            <a href="index_admin.html">
                <img src="../../images/hospital-icon.png" alt="" style="width: 40px;height: 40px">
                <p style="display: inline-block;font-size: 24px;">门诊管理系统</p>
            </a>
        </div>

        <!--收起状态的侧边栏顶部图标-->
        <div class="logo-icon text-center">
            <a href="../../index.html"><img src="../../images/hospital-icon.png" alt="" style="width: 40px;height: 40px"></a>
        </div>
        <!--logo and iconic logo end-->

        <div class="left-side-inner">

            <!--sidebar nav start-->
            <!--侧边栏-->
            <ul class="nav nav-pills nav-stacked custom-nav">


                <li class="menu-list nav-active">
                    <a href="">
                        <i class="fa fa-book"></i>
                        <span>患者管理</span>
                    </a>
                    <ul class="sub-menu-list">
                        <li><a href="admissionList.html"> 入院登记管理</a></li>
                        <li><a href="appointmentList.html">预约挂号管理</a></li>
                        <li class="active"><a href="patientInfoList.html"> 患者信息管理</a></li>
                    </ul>
                </li>

                <li class="menu-list">
                    <a href="">
                        <i class="fa fa-book"></i>
                        <span>门诊管理</span>
                    </a>
                    <ul class="sub-menu-list">
                        <li><a href="departmentList.html"> 科室管理</a></li>
                        <li><a href="staffList.html">员工管理</a></li>
                        <li><a href="emrList.html"> 电子病历管理</a></li>
                        <li><a href="orderList.html"> 医嘱管理</a></li>
                    </ul>
                </li>
                <li class="menu-list">
                    <a href="">
                        <i class="fa fa-cogs"></i>
                        <span>药库管理</span>
                    </a>
                    <ul class="sub-menu-list">
                        <li><a href="drugInfoList.html"> 药库库存管理</a></li>
                        <li><a href="itemList.html"> 产品管理</a></li>
                        <li><a href="pickingList.html"> 捡药发药管理</a></li>
                        <li><a href="prescriptionList.html"> 处方管理</a></li>
                    </ul>
                </li>

                <li class="menu-list">
                    <a href="fontawesome.html">
                        <i class="fa fa-bullhorn"></i>
                        <span>账单管理</span>
                    </a>
                    <ul class="sub-menu-list">
                        <li><a href="billList.html"> 账单管理</a></li>
                        <li><a href="journalList.html"> 缴费单管理</a></li>
                    </ul>
                </li>

                <li class="menu-list">
                    <a href="">
                        <i class="fa fa-tasks"></i>
                        <span>用户管理</span>
                    </a>
                    <ul class="sub-menu-list">
                        <li><a href="userList.html"> 用户管理</a></li>
                    </ul>
                </li>

                <li class="logout">
                    <a href="#">
                        <i class="fa fa-sign-in"></i>
                        <span>退出登录</span>
                    </a>
                </li>

            </ul>
            <!--sidebar nav end-->
            <!--侧边栏导航结束-->

        </div>
    </div>
    <!-- left side end-->
    <!-- 左侧 部分 结束 -->

    <!-- main content start-->
    <div class="main-content" >

        <!-- header section start-->
        <!--顶部菜单部分开始-->
        <div class="header-section">

            <!--toggle button start-->
            <!--拨动按钮-收起侧边栏-->
            <a class="toggle-btn"><i class="fa fa-bars"></i></a>
            <!--toggle button end-->

            <!--notification menu start -->
            <!--通知菜单开始-->
            <div class="menu-right" id="headerApp">
                <ul class="notification-menu">

                    <li>
                        <a href="#" class="btn btn-default dropdown-toggle info-number logout" data-toggle="dropdown">
                            退出登录
                            <i class="fa fa-sign-out"></i>
                        </a>
                    </li>


                </ul>
            </div>
            <!--notification menu end -->
            <!--通知菜单结束-->
        </div>
        <!-- header section end-->
        <!--顶部菜单部分结束-->

        <!--body wrapper start-->
        <div class="wrapper" id="patientApp">
            <div class="row">
                <div class="col-sm-12">
                    <section class="panel">
                        <header class="panel-heading">
                            患者信息管理
                            <span class="tools pull-right"></span>
                        </header>
                        <div class="panel-body">
                            <div class="adv-table editable-table ">

                                <div class="clearfix"  style="margin-bottom: 20px">
                                    <form class="form-inline" role="form">

                                        <a href="#newPatientInfo" class="btn btn-info details" data-toggle="modal">
                                            新增
                                            <i class="fa fa-plus"></i>
                                        </a>

                                        <!-- Modal -->
                                        <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="newPatientInfo" class="modal fade">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                    <div class="modal-header" style="width: auto;height: auto">
                                                        <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                                                        <h4 class="modal-title">新增患者</h4>
                                                    </div>
                                                    <div class="modal-body"  style="width: auto;height: auto;position: relative">
                                                        <div class="btn-group col-sm-12" style="margin-bottom: 15px">
                                                            <label class="col-sm-4 control-label">绑定用户ID</label>
                                                            <div class="col-sm-8">
                                                                <input v-model="adduserId" class="col-sm-12" type="text" class="form-control" placeholder="请输入绑定用户ID">
                                                            </div>
                                                        </div>
                                                        <div class="btn-group col-sm-12" style="margin-bottom: 15px">
                                                            <label class="col-sm-4 control-label">患者姓名</label>
                                                            <div class="col-sm-8">
                                                                <input v-model="addpatientName" class="col-sm-12" type="text" class="form-control" placeholder="请输入患者姓名">
                                                            </div>
                                                        </div>
                                                        <div class="btn-group col-sm-12" style="margin-bottom: 15px">
                                                            <label class="col-sm-4 control-label">出生年月日</label>
                                                            <div class="col-sm-8">
                                                                <input id="addPatientDob" class="form-control form-control-inline input-medium default-date-picker"  size="16" type="text" value=""  placeholder="选择时间" />
                                                            </div>
                                                        </div>
                                                        <div class="btn-group col-sm-12" style="margin-bottom: 15px">
                                                            <label class="col-sm-4 control-label">血型:</label>
                                                            <div class="col-sm-8">
                                                                <button id="addblood" data-toggle="dropdown" class="btn btn-info dropdown-toggle" type="button">选择血型 <span class="caret"></span></button>
                                                                <ul role="menu" class="dropdown-menu">
                                                                    <li><a href="#" @click="checkBlood('A型')">A型</a></li>
                                                                    <li><a href="#" @click="checkBlood('B型')">B型</a></li>
                                                                    <li><a href="#" @click="checkBlood('O型')">O型</a></li>
                                                                    <li><a href="#" @click="checkBlood('AB型')">AB型</a></li>
                                                                    <li><a href="#" @click="checkBlood('其他')">其他</a></li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                        <div class="btn-group col-sm-12" style="margin-bottom: 15px">
                                                            <label class="col-sm-4 control-label">性别:</label>
                                                            <div class="col-sm-8">
                                                                <button id="addsex" data-toggle="dropdown" class="btn btn-info dropdown-toggle" type="button">性别 <span class="caret"></span></button>
                                                                <ul role="menu" class="dropdown-menu">
                                                                    <li><a href="#" @click="checkSex(0)">男</a></li>
                                                                    <li><a href="#" @click="checkSex(1)">女</a></li>
                                                                    <li><a href="#" @click="checkSex(2)">未知</a></li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                        <div class="btn-group col-sm-12" style="margin-bottom: 15px">
                                                            <label class="col-sm-4 control-label">婚姻状况:</label>
                                                            <div class="col-sm-8">
                                                                <button id="maritalStatus" data-toggle="dropdown" class="btn btn-info dropdown-toggle" type="button">婚姻状况 <span class="caret"></span></button>
                                                                <ul role="menu" class="dropdown-menu">
                                                                    <li><a href="#" @click="checkMarital(0)">未婚</a></li>
                                                                    <li><a href="#" @click="checkMarital(1)">已婚</a></li>
                                                                    <li><a href="#" @click="checkMarital(2)">离偶</a></li>
                                                                    <li><a href="#" @click="checkMarital(3)">离婚</a></li>
                                                                    <li><a href="#" @click="checkMarital(4)">其他</a></li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                        <div class="btn-group col-sm-12" style="margin-bottom: 15px">
                                                            <label class="col-sm-4 control-label">国籍</label>
                                                            <div class="col-sm-8">
                                                                <input v-model="addnationality" class="col-sm-12" type="text" class="form-control" placeholder="请输入国籍">
                                                            </div>
                                                        </div>
                                                        <div class="btn-group col-sm-12" style="margin-bottom: 15px">
                                                            <label class="col-sm-4 control-label">籍贯</label>
                                                            <div class="col-sm-8">
                                                                <input v-model="addnativePlace" class="col-sm-12" type="text" class="form-control" placeholder="请输入籍贯">
                                                            </div>
                                                        </div>
                                                        <div class="btn-group col-sm-12" style="margin-bottom: 15px">
                                                            <label class="col-sm-4 control-label">身份证号码</label>
                                                            <div class="col-sm-8">
                                                                <input v-model="adddocumentNo" class="col-sm-12" type="text" class="form-control" placeholder="请输入身份证号码">
                                                            </div>
                                                        </div>
                                                        <div class="btn-group col-sm-12" style="margin-bottom: 15px">
                                                            <label class="col-sm-4 control-label">家庭地址</label>
                                                            <div class="col-sm-8">
                                                                <input v-model="addhomeAddress" class="col-sm-12" type="text" class="form-control" placeholder="请输入家庭地址">
                                                            </div>
                                                        </div>
                                                        <div class="btn-group col-sm-12" style="margin-bottom: 15px">
                                                            <label class="col-sm-4 control-label">现居地</label>
                                                            <div class="col-sm-8">
                                                                <input v-model="addnowAddress" class="col-sm-12" type="text" class="form-control" placeholder="请输入现居地">
                                                            </div>
                                                        </div>
                                                        <div class="btn-group col-sm-12" style="margin-bottom: 15px">
                                                            <label class="col-sm-4 control-label">电话号码</label>
                                                            <div class="col-sm-8">
                                                                <input v-model="addphone" class="col-sm-12" type="text" class="form-control" placeholder="请输入电话号码">
                                                            </div>
                                                        </div>
                                                        <div class="btn-group col-sm-12" style="margin-bottom: 15px">
                                                            <label class="col-sm-4 control-label">邮箱</label>
                                                            <div class="col-sm-8">
                                                                <input v-model="addemail" class="col-sm-12" type="text" class="form-control" placeholder="请输入邮箱">
                                                            </div>
                                                        </div>
                                                        <div class="btn-group col-sm-12" style="margin-bottom: 15px">
                                                            <label class="col-sm-4 control-label">身高(cm)</label>
                                                            <div class="col-sm-8">
                                                                <input v-model="addheight" class="col-sm-12" type="text" class="form-control" placeholder="请输入身高(cm)">
                                                            </div>
                                                        </div>
                                                        <div class="btn-group col-sm-12" style="margin-bottom: 15px">
                                                            <label class="col-sm-4 control-label">体重(kg)</label>
                                                            <div class="col-sm-8">
                                                                <input v-model="addweight" class="col-sm-12" type="text" class="form-control" placeholder="请输入体重(kg)">
                                                            </div>
                                                        </div>
                                                        <div class="btn-group col-sm-12" style="margin-bottom: 15px">
                                                            <label class="col-sm-4 control-label">工作单位名称</label>
                                                            <div class="col-sm-8">
                                                                <input v-model="addworkCompanyName" class="col-sm-12" type="text" class="form-control" placeholder="请输入工作单位名称">
                                                            </div>
                                                        </div>
                                                        <div class="btn-group col-sm-12" style="margin-bottom: 15px">
                                                            <label class="col-sm-4 control-label">单位电话</label>
                                                            <div class="col-sm-8">
                                                                <input v-model="addworkCompanyPhone" class="col-sm-12" type="text" class="form-control" placeholder="请输入单位电话">
                                                            </div>
                                                        </div>
                                                        <div class="btn-group col-sm-12" style="margin-bottom: 15px">
                                                            <label class="col-sm-4 control-label">职务名称</label>
                                                            <div class="col-sm-8">
                                                                <input v-model="addpositionName" class="col-sm-12" type="text" class="form-control" placeholder="请输入职务名称">
                                                            </div>
                                                        </div>
                                                        <div class="btn-group col-sm-12" style="margin-bottom: 15px">
                                                            <label class="col-sm-4 control-label">紧急联系人电话</label>
                                                            <div class="col-sm-8">
                                                                <input v-model="addemergencyContactPhoneNo" class="col-sm-12" type="text" class="form-control" placeholder="请输入紧急联系人电话">
                                                            </div>
                                                        </div>
                                                        <div class="btn-group col-sm-12" style="margin-bottom: 15px">
                                                            <label class="col-sm-4 control-label">紧急联系人姓名</label>
                                                            <div class="col-sm-8">
                                                                <input v-model="addemergencyContactName" class="col-sm-12" type="text" class="form-control" placeholder="请输入紧急联系人姓名">
                                                            </div>
                                                        </div>
                                                        <div class="btn-group col-sm-12" style="margin-bottom: 15px">
                                                            <label class="col-sm-4 control-label">紧急联系人关系</label>
                                                            <div class="col-sm-8">
                                                                <input v-model="addemergencyContactRelationship" class="col-sm-12" type="text" class="form-control" placeholder="请输入紧急联系人关系">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer"  style="width: auto;height: auto;border: none">
                                                        <button type="button" class="btn btn-default" data-dismiss="modal" @click="resetAddPatient">取消</button>
                                                        <button type="button" class="btn btn-success" @click="addPatient">保存</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="btn-group">
                                            <button data-toggle="dropdown" class="btn btn-info dropdown-toggle" type="button">
                                                <span v-text="selectPageSizeName">分页数</span>
                                                <span class="caret"></span>
                                            </button>
                                            <ul role="menu" class="dropdown-menu">
                                                <li><a href="#" @click="selectPage(10)">10</a></li>
                                                <li><a href="#" @click="selectPage(20)">20</a></li>
                                                <li><a href="#" @click="selectPage(30)">30</a></li>
                                            </ul>
                                        </div>

                                        <div class="form-group" >
                                            <div class="flat-blue single-row">
                                                <div class="radio ">
                                                    <label>选择创建时间： </label>
                                                    <input id="selectTime" class="form-control form-control-inline input-medium default-date-picker"  size="16" type="text" value="" placeholder="选择时间" />
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <input v-model="selectPatientName" type="text" class="form-control" style="width: 300px" placeholder="根据患者姓名查询">
                                        </div>

                                        <button type="button" class="btn btn-info" @click="selectPatientListButton()">
                                            查询
                                            <i class="fa fa-search"></i>
                                        </button>
                                        <button type="button" class="btn btn-default" @click="selectReset()">
                                            重置
                                            <i class="fa fa-undo"></i>
                                        </button>

                                    </form>
                                </div>


                                <table class="table table-striped table-hover table-bordered" id="editable-sample">
                                    <thead>
                                    <tr>
                                        <th>患者ID</th>
                                        <th>用户ID</th>
                                        <th>患者姓名</th>
                                        <th>出生年月日</th>
                                        <th>年龄</th>
                                        <th>年龄（月）</th>
                                        <th>血型</th>
                                        <th>性别</th>
                                        <th>婚姻状况</th>
                                        <th>国籍</th>
                                        <th>籍贯</th>
                                        <th>身份证号码</th>
                                        <th>家庭地址</th>
                                        <th>现居地</th>
                                        <th>电话号码</th>
                                        <th>邮箱</th>
                                        <th>身高</th>
                                        <th>体重</th>
                                        <th>工作单位名称</th>
                                        <th>单位电话</th>
                                        <th>职务名称</th>
                                        <th>紧急联系人电话</th>
                                        <th>紧急联系人姓名</th>
                                        <th>紧急联系人关系</th>
                                        <th>创建时间</th>
                                        <th>修改</th>
                                        <th>删除</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr class="" v-for="patientInfo in patientList">
                                        <td v-text="patientInfo.patientId"></td>
                                        <td v-text="patientInfo.userId"></td>
                                        <td v-text="patientInfo.patientName"></td>
                                        <td v-text="patientInfo.returnPatientDob"></td>
                                        <td v-text="patientInfo.age"></td>
                                        <td v-text="patientInfo.ageMon"></td>
                                        <td>
                                            <span v-text="patientInfo.blood"></span>
                                        </td>
                                        <td>
                                            <span v-if="patientInfo.sex==0">男</span>
                                            <span v-if="patientInfo.sex==1">女</span>
                                            <span v-if="patientInfo.sex==2">其他</span>
                                        </td>
                                        <td>
                                            <span v-if="patientInfo.maritalStatus==0">未婚</span>
                                            <span v-if="patientInfo.maritalStatus==1">已婚</span>
                                            <span v-if="patientInfo.maritalStatus==2">离偶</span>
                                            <span v-if="patientInfo.maritalStatus==3">离婚</span>
                                            <span v-if="patientInfo.maritalStatus==4">其他</span>
                                        </td>
                                        <td v-text="patientInfo.nationality"></td>
                                        <td v-text="patientInfo.nativePlace"></td>
                                        <td v-text="patientInfo.documentNo"></td>
                                        <td v-text="patientInfo.homeAddress"></td>
                                        <td v-text="patientInfo.nowAddress"></td>
                                        <td v-text="patientInfo.phone"></td>
                                        <td v-text="patientInfo.email"></td>
                                        <td>
                                            <span v-text="patientInfo.height">180</span>
                                            <span>cm</span>
                                        </td>
                                        <td>
                                            <span v-text="patientInfo.weight">120</span>
                                            <span>kg</span>
                                        </td>
                                        <td v-text="patientInfo.workCompanyName">思创医惠</td>
                                        <td v-text="patientInfo.workCompanyPhone">滨江区</td>
                                        <td v-text="patientInfo.positionName">Java开发</td>
                                        <td v-text="patientInfo.emergencyContactName">曾晨</td>
                                        <td v-text="patientInfo.emergencyContactPhoneNo">17779683224</td>
                                        <td v-text="patientInfo.emergencyContactRelationship">兄弟</td>
                                        <td class="center" v-text="patientInfo.returnCreateTime">2022-04-28</td>
                                        <td>
                                            <a href="#modifyPatientInfo" class="details" style="color: #46b8da;" data-toggle="modal" @click="modifySelectPatientInfo(patientInfo.patientId)">修改</a>
                                        </td>

                                        <td>
                                            <a :href="'#deleteyMyAppointment'+patientInfo.patientId" class="details" style="color: #46b8da;" data-toggle="modal">删除</a>
                                            <!-- Modal -->
                                            <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" :id="'deleteyMyAppointment'+patientInfo.patientId" class="modal fade">
                                                <div class="modal-dialog">
                                                    <div class="modal-content">
                                                        <div class="modal-header" style="width: auto;height: auto">
                                                            <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                                                            <h4 class="modal-title">删除预约</h4>
                                                        </div>
                                                        <div class="modal-body"  style="width: auto;height: auto;position: relative">
                                                            <div class="btn-group col-sm-12" style="margin-bottom: 15px">
                                                                <label class="col-sm-4 control-label">是否确认删除预约</label>
                                                            </div>
                                                        </div>
                                                        <div class="modal-footer"  style="width: auto;height: auto;border: none">
                                                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                                            <button type="button" class="btn btn-success" @click="deletePatient(patientInfo.patientId)">确认</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>

                                <!--修改按钮下来内容-->
                                <!-- Modal -->
                                <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="modifyPatientInfo" class="modal fade">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header" style="width: auto;height: auto">
                                                <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                                                <h4 class="modal-title">修改患者信息</h4>
                                            </div>
                                            <div class="modal-body"  style="width: auto;height: auto;position: relative" style="background-color: white">
                                                <div class="btn-group col-sm-12" style="margin-bottom: 15px">
                                                    <label class="col-sm-4 control-label">绑定用户ID</label>
                                                    <div class="col-sm-8">
                                                        <input v-model="modifyPatientDetail.userId"  class="col-sm-12" type="text" class="form-control" placeholder="请输入绑定用户ID" disabled>
                                                    </div>
                                                </div>
                                                <div class="btn-group col-sm-12" style="margin-bottom: 15px">
                                                    <label class="col-sm-4 control-label">患者姓名</label>
                                                    <div class="col-sm-8">
                                                        <input v-model="modifyPatientDetail.patientName"   class="col-sm-12" type="text" class="form-control" placeholder="请输入患者姓名" disabled>
                                                    </div>
                                                </div>
                                                <div class="btn-group col-sm-12" style="margin-bottom: 15px">
                                                    <label class="col-sm-4 control-label">出生年月日</label>
                                                    <div class="col-sm-8">
                                                        <input id="modifyPatientBob" v-model="modifyPatientDetail.returnPatientDob" class="form-control form-control-inline input-medium default-date-picker"  size="16" type="text" value=""  placeholder="选择时间" />
                                                    </div>
                                                </div>
                                                <div class="btn-group col-sm-12" style="margin-bottom: 15px">
                                                    <label class="col-sm-4 control-label">血型:</label>
                                                    <div class="col-sm-8">
                                                        <button  data-toggle="dropdown" class="btn btn-info dropdown-toggle" type="button">
                                                            <span v-text="modifyPatientDetail.blood">选择血型 </span>
                                                            <span class="caret"></span>
                                                        </button>
                                                        <ul role="menu" class="dropdown-menu">
                                                            <li><a href="#" @click="checkBloodChangBlood('A型')">A型</a></li>
                                                            <li><a href="#" @click="checkBloodChangBlood('B型')">B型</a></li>
                                                            <li><a href="#" @click="checkBloodChangBlood('O型')">O型</a></li>
                                                            <li><a href="#" @click="checkBloodChangBlood('AB型')">AB型</a></li>
                                                            <li><a href="#" @click="checkBloodChangBlood('其他')">其他</a></li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="btn-group col-sm-12" style="margin-bottom: 15px">
                                                    <label class="col-sm-4 control-label">性别:</label>
                                                    <div class="col-sm-8">
                                                        <button data-toggle="dropdown" class="btn btn-info dropdown-toggle" type="button">
                                                            <span v-text="modifyPatientDetail.sexName">性别 </span>
                                                            <span class="caret"></span>
                                                        </button>
                                                        <ul role="menu" class="dropdown-menu">
                                                            <li><a href="#" @click="checkSexChangeSex(0)">男</a></li>
                                                            <li><a href="#" @click="checkSexChangeSex(1)">女</a></li>
                                                            <li><a href="#" @click="checkSexChangeSex(2)">未知</a></li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="btn-group col-sm-12" style="margin-bottom: 15px">
                                                    <label class="col-sm-4 control-label">婚姻状况:</label>
                                                    <div class="col-sm-8">
                                                        <button data-toggle="dropdown" class="btn btn-info dropdown-toggle" type="button">
                                                            <span v-text="modifyPatientDetail.maritalStatusName">婚姻状况</span>
                                                            <span class="caret"></span>
                                                        </button>
                                                        <ul role="menu" class="dropdown-menu">
                                                            <li><a href="#" @click="checkMaritalChangeMarital(0)">未婚</a></li>
                                                            <li><a href="#" @click="checkMaritalChangeMarital(1)">已婚</a></li>
                                                            <li><a href="#" @click="checkMaritalChangeMarital(2)">离偶</a></li>
                                                            <li><a href="#" @click="checkMaritalChangeMarital(3)">离婚</a></li>
                                                            <li><a href="#" @click="checkMaritalChangeMarital(4)">其他</a></li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="btn-group col-sm-12" style="margin-bottom: 15px">
                                                    <label class="col-sm-4 control-label">国籍</label>
                                                    <div class="col-sm-8">
                                                        <input v-model="modifyPatientDetail.nationality" class="col-sm-12" type="text" class="form-control" placeholder="请输入国籍">
                                                    </div>
                                                </div>
                                                <div class="btn-group col-sm-12" style="margin-bottom: 15px">
                                                    <label class="col-sm-4 control-label">籍贯</label>
                                                    <div class="col-sm-8">
                                                        <input v-model="modifyPatientDetail.nativePlace"  class="col-sm-12" type="text" class="form-control" placeholder="请输入籍贯">
                                                    </div>
                                                </div>
                                                <div class="btn-group col-sm-12" style="margin-bottom: 15px">
                                                    <label class="col-sm-4 control-label">身份证号码</label>
                                                    <div class="col-sm-8">
                                                        <input v-model="modifyPatientDetail.documentNo" class="col-sm-12" type="text" class="form-control" placeholder="请输入身份证号码">
                                                    </div>
                                                </div>
                                                <div class="btn-group col-sm-12" style="margin-bottom: 15px">
                                                    <label class="col-sm-4 control-label">家庭地址</label>
                                                    <div class="col-sm-8">
                                                        <input v-model="modifyPatientDetail.homeAddress" class="col-sm-12" type="text" class="form-control" placeholder="请输入家庭地址">
                                                    </div>
                                                </div>
                                                <div class="btn-group col-sm-12" style="margin-bottom: 15px">
                                                    <label class="col-sm-4 control-label">现居地</label>
                                                    <div class="col-sm-8">
                                                        <input v-model="modifyPatientDetail.nowAddress" class="col-sm-12" type="text" class="form-control" placeholder="请输入现居地">
                                                    </div>
                                                </div>
                                                <div class="btn-group col-sm-12" style="margin-bottom: 15px">
                                                    <label class="col-sm-4 control-label">电话号码</label>
                                                    <div class="col-sm-8">
                                                        <input v-model="modifyPatientDetail.phone" class="col-sm-12" type="text" class="form-control" placeholder="请输入电话号码">
                                                    </div>
                                                </div>
                                                <div class="btn-group col-sm-12" style="margin-bottom: 15px">
                                                    <label class="col-sm-4 control-label">邮箱</label>
                                                    <div class="col-sm-8">
                                                        <input v-model="modifyPatientDetail.email" class="col-sm-12" type="text" class="form-control" placeholder="请输入邮箱">
                                                    </div>
                                                </div>
                                                <div class="btn-group col-sm-12" style="margin-bottom: 15px">
                                                    <label class="col-sm-4 control-label">身高(cm)</label>
                                                    <div class="col-sm-8">
                                                        <input v-model="modifyPatientDetail.height" class="col-sm-12" type="text" class="form-control" placeholder="请输入身高(cm)">
                                                    </div>
                                                </div>
                                                <div class="btn-group col-sm-12" style="margin-bottom: 15px">
                                                    <label class="col-sm-4 control-label">体重(kg)</label>
                                                    <div class="col-sm-8">
                                                        <input v-model="modifyPatientDetail.weight" class="col-sm-12" type="text" class="form-control" placeholder="请输入体重(kg)">
                                                    </div>
                                                </div>
                                                <div class="btn-group col-sm-12" style="margin-bottom: 15px">
                                                    <label class="col-sm-4 control-label">工作单位名称</label>
                                                    <div class="col-sm-8">
                                                        <input v-model="modifyPatientDetail.workCompanyName" class="col-sm-12" type="text" class="form-control" placeholder="请输入工作单位名称">
                                                    </div>
                                                </div>
                                                <div class="btn-group col-sm-12" style="margin-bottom: 15px">
                                                    <label class="col-sm-4 control-label">单位电话</label>
                                                    <div class="col-sm-8">
                                                        <input v-model="modifyPatientDetail.workCompanyPhone" class="col-sm-12" type="text" class="form-control" placeholder="请输入单位电话">
                                                    </div>
                                                </div>
                                                <div class="btn-group col-sm-12" style="margin-bottom: 15px">
                                                    <label class="col-sm-4 control-label">职务名称</label>
                                                    <div class="col-sm-8">
                                                        <input v-model="modifyPatientDetail.positionName" class="col-sm-12" type="text" class="form-control" placeholder="请输入职务名称">
                                                    </div>
                                                </div>
                                                <div class="btn-group col-sm-12" style="margin-bottom: 15px">
                                                    <label class="col-sm-4 control-label">紧急联系人电话</label>
                                                    <div class="col-sm-8">
                                                        <input v-model="modifyPatientDetail.emergencyContactPhoneNo" class="col-sm-12" type="text" class="form-control" placeholder="请输入紧急联系人电话">
                                                    </div>
                                                </div>
                                                <div class="btn-group col-sm-12" style="margin-bottom: 15px">
                                                    <label class="col-sm-4 control-label">紧急联系人姓名</label>
                                                    <div class="col-sm-8">
                                                        <input v-model="modifyPatientDetail.emergencyContactName" class="col-sm-12" type="text" class="form-control" placeholder="请输入紧急联系人姓名">
                                                    </div>
                                                </div>
                                                <div class="btn-group col-sm-12" style="margin-bottom: 15px">
                                                    <label class="col-sm-4 control-label">紧急联系人关系</label>
                                                    <div class="col-sm-8">
                                                        <input v-model="modifyPatientDetail.emergencyContactRelationship"  class="col-sm-12" type="text" class="form-control" placeholder="请输入紧急联系人关系">
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                        <div class="modal-footer"  style="width: auto;height: auto;border: none;background-color: white;margin-top: 0">
                                            <button type="button" class="btn btn-default" data-dismiss="modal"  @click="cancelModifyPatientInfo()">取消</button>
                                            <button type="button" class="btn btn-success" @click="saveModifyPatientInfo(modifyPatientDetail.patientId)">保存</button>
                                        </div>
                                    </div>
                                </div>

                            </div>
                                <div class="clearfix">
                                    <div class="btn-group pull-right">
                                        <ul class="pagination pagination-sm">
                                            <li><a href="#"  @click.prevent="loadPatientList(pageinfo.prePage)">上一页</a></li>
                                            <li v-for="n in pageinfo.navigatepageNums" @click.prevent="loadPatientList(n)" :class="{'active': n == pageinfo.pageNum}">
                                                <a href="#" v-text="n">1</a>
                                            </li>
                                            <li><a href="#" @click.prevent="loadPatientList(pageinfo.nextPage)">下一页</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                    </section>
                </div>
            </div>
        </div>
        <!--body wrapper end-->

        <!--footer section start-->
        <!--页脚部分开始-->
        <footer>
            2022 &copy; <a href="https://gitee.com/allen-zc/OutpatientManagementSystem" target="_blank">基于SSM的门诊管理系统</a>
            -
            <a href="https://gitee.com/allen-zc" target="_blank">AllenChen曾晨</a>
            -
            <p style="display: inline-block">ALL RIGHTS RESERVED.</p>
        </footer>
        <!--footer section end-->
        <!--页脚部分结束-->


    </div>
    <!-- main content end-->
</section>

<!-- Placed js at the end of the document so the pages load faster -->
<script src="../../js/jquery-1.10.2.min.js"></script>
<script src="../../js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="../../js/jquery-migrate-1.2.1.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<script src="../../js/modernizr.min.js"></script>
<script src="../../js/jquery.nicescroll.js"></script>

<!--时间风格及输入框风格-->
<!--pickers plugins-->
<script type="text/javascript" src="../../js/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="../../js/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="../../js/bootstrap-daterangepicker/moment.min.js"></script>
<script type="text/javascript" src="../../js/bootstrap-daterangepicker/daterangepicker.js"></script>
<script type="text/javascript" src="../../js/bootstrap-colorpicker/js/bootstrap-colorpicker.js"></script>
<script type="text/javascript" src="../../js/bootstrap-timepicker/js/bootstrap-timepicker.js"></script>
<!--pickers initialization-->
<script src="../../js/pickers-init.js"></script>
<!--时间风格及输入框风格-->

<!--data table-->
<script type="text/javascript" src="../../js/data-tables/jquery.dataTables.js"></script>
<script type="text/javascript" src="../../js/data-tables/DT_bootstrap.js"></script>

<!--common scripts for all pages-->
<script src="../../js/scripts.js"></script>

<script src="https://unpkg.zhimg.com/vue"></script>
<!--&lt;!&ndash; 开发环境版本，包含了有帮助的命令行警告 &ndash;&gt;-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>-->
<!--&lt;!&ndash; 生产环境版本，优化了尺寸和速度 &ndash;&gt;-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>-->
<!--axios-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>


<!--退出登录的方法-->
<script  type="text/javascript" charset="GB2312"  src="../../userjs/logout.js"></script>
<!--工具箱-->
<script src="../../js/utils.js"></script>

<script>
    let patientApp = new Vue({
        el:"#patientApp",
        data:{
            adduserId:"",
            addpatientName:"",
            addpatientDob:"",
            addblood:"",
            addsex:"",
            addmaritalStatus:"",
            addnationality:"",
            addnativePlace:"",
            adddocumentNo:"",
            addhomeAddress:"",
            addnowAddress:"",
            addphone:"",
            addemail:"",
            addheight:"",
            addweight:"",
            addworkCompanyName:"",
            addworkCompanyPhone:"",
            addpositionName:"",
            addemergencyContactPhoneNo:"",
            addemergencyContactName:"",
            addemergencyContactRelationship:"",

            selectPageSizeName: '分页数',
            selectPageSize: '10',
            selectPageNum: '1',
            selectTime:'',
            selectPatientName:'',
            patientList:[],
            pageinfo:{},

            modifyPatientDetail:{},

        },
        methods:{
            // 新增用户 新增按钮
            addPatient:function () {
                this.getDOB();
                let form=new FormData();
                form.append("userId",this.adduserId)
                form.append("patientName",this.addpatientName)
                form.append("patientDob",this.addpatientDob)
                form.append("blood",this.addblood)
                form.append("sex",this.addsex)
                form.append("maritalStatus",this.addmaritalStatus)
                form.append("nationality",this.addnationality)
                form.append("nativePlace",this.addnativePlace)
                form.append("documentNo",this.adddocumentNo)
                form.append("homeAddress",this.addhomeAddress)
                form.append("nowAddress",this.addnowAddress)
                form.append("phone",this.addphone)
                form.append("email",this.addemail)
                form.append("height",this.addheight)
                form.append("weight",this.addweight)
                form.append("workCompanyName",this.addworkCompanyName)
                form.append("workCompanyPhone",this.addworkCompanyPhone)
                form.append("positionName",this.addpositionName)
                form.append("emergencyContactPhoneNo",this.addemergencyContactPhoneNo)
                form.append("emergencyContactName",this.addemergencyContactName)
                form.append("emergencyContactRelationship",this.addemergencyContactRelationship)

                axios({
                    url:"/oms/patient/addPatient",
                    method:"post",
                    data:form
                }).then(function (res) {
                    if (res.data=='ok'){
                        alert("新增成功")
                        // 新增成功刷新新增数据内容
                        // patientApp.resetAddPatient();
                        location.reload();
                    }
                }).catch(function(error){
                    //失败运行这里,输出错误信息
                    alert(error)
                    console.log(error);
                })

            },
            // 清空新增中的内容
            //新增用户 取消按钮
            resetAddPatient:function () {
                this.adduserId=""
                this.addpatientName = ""
                this.addpatientDob = ""
                this.addblood = ""
                this.addsex = ""
                this.addmaritalStatus = ""
                this.addnationality = ""
                this.addnativePlace = ""
                this.adddocumentNo = ""
                this.addhomeAddress = ""
                this.addnowAddress = ""
                this.addphone = ""
                this.addemail = ""
                this.addheight = ""
                this.addweight = ""
                this.addworkCompanyName = ""
                this.addworkCompanyPhone = ""
                this.addpositionName = ""
                this.addemergencyContactPhoneNo = ""
                this.addemergencyContactName = ""
                this.addemergencyContactRelationship = ""

                document.getElementById('addblood').innerHTML =  '选择血型 <span class=\"caret\"></span>';
                document.getElementById('addsex').innerHTML =  '性别 <span class=\"caret\"></span>';
                document.getElementById('maritalStatus').innerHTML =  '婚姻状况 <span class=\"caret\"></span>';
                $('#addPatientDob').val('')
            },
            //新增用户 选择血型
            checkBlood:function (blood){
                this.addblood = blood;
                document.getElementById('addblood').innerHTML =  this.addblood + '<span class=\"caret\"></span>';
            },
            //新增用户 获取出生年月日
            getDOB:function () {
                this.addpatientDob = $('#addPatientDob').val()
            },
            //新增用户 选择性别
            checkSex:function (sex) {
                this.addsex = sex;
                if (sex==0){
                    document.getElementById('addsex').innerHTML =  "男 <span class=\"caret\"></span>";
                }
                if (sex==1){
                    document.getElementById('addsex').innerHTML =  "女 <span class=\"caret\"></span>";
                }
                if (sex==2){
                    document.getElementById('addsex').innerHTML =  "未知 <span class=\"caret\"></span>";
                }

            },
            //新增用户 选择婚姻状况
            checkMarital:function (maritalStatus) {
                this.addmaritalStatus = maritalStatus;
                if (maritalStatus==0){
                    document.getElementById('maritalStatus').innerHTML =  "未婚 <span class=\"caret\"></span>";
                }
                if (maritalStatus==1){
                    document.getElementById('maritalStatus').innerHTML =  "已婚 <span class=\"caret\"></span>";
                }
                if (maritalStatus==2){
                    document.getElementById('maritalStatus').innerHTML =  "离偶 <span class=\"caret\"></span>";
                }
                if (maritalStatus==3){
                    document.getElementById('maritalStatus').innerHTML =  "离婚 <span class=\"caret\"></span>";
                }
                if (maritalStatus==4){
                    document.getElementById('maritalStatus').innerHTML =  "其他 <span class=\"caret\"></span>";
                }
            },
            // 搜索 搜索按钮
            selectPatientListButton:function () {
                this.selectPatientListTime();
                let form=new FormData();
                form.append("selectTime",this.selectTime);
                form.append("patientName",this.selectPatientName);
                form.append("pageNum",this.selectPageNum);
                form.append("pageSize",this.selectPageSize)

                axios({
                    url:"/oms/patient/selectPatientList",
                    method:"post",
                    data:form
                }).then(function (res) {
                    patientApp.patientList = res.data.list;
                    patientApp.pageinfo = res.data;
                }).catch(function(error){
                    //失败运行这里,输出错误信息
                    alert(error)
                    console.log(error);
                })
            },
            // 搜索 重置
            selectReset:function () {
                this.selectPageSizeName='分页数';
                this.selectPageSize='10';
                this.selectPageNum='1';
                $('#selectTime').val('')
                this.selectPatientName='';
            },
            // 搜索 获取搜索时间范围
            selectPatientListTime:function () {
                this.selectTime = $('#selectTime').val()
            },
            // 搜索 分页数
            selectPage:function (pageNum) {
                this.selectPageSize = pageNum;
                this.selectPageSizeName=pageNum;
            },
            // 查询列表 上一页下一页
            loadPatientList:function (pageNum) {
                let form=new FormData();
                // 判断pageNum是==null,可以理解为判断pageNum不存在
                if(!pageNum){
                    this.selectPageNum = 1
                }
                if (this.selectPageSize==''||this.selectPageSize=='分页数'||this.selectPageSize==null){
                    this.selectPageSize = 10
                }

                form.append("pageNum",this.selectPageNum);
                form.append("pageSize",this.selectPageSize);
                form.append("selectTime",this.selectTime);
                form.append("patientName",this.selectPatientName);
                axios({
                    url: '/oms/patient/selectPatientList',
                    method: "POST",
                    data:form
                }).then(function(res){
                    console.log("成功加载数据");
                    console.log(res);
                    if(res.status == OK){
                        patientApp.patientList = res.data.list;
                        patientApp.pageinfo = res.data;
                    }
                })
            },
            //查询 患者详情
            modifySelectPatientInfo:function (patientId) {
                let form=new FormData();
                form.append("patientId",patientId);
                axios({
                    url:"/oms/patient/selectPatientDetail",
                    method:"post",
                    data:form
                }).then(function (res) {
                    patientApp.modifyPatientDetail = res.data;
                }).catch(function(error){
                    //失败运行这里,输出错误信息
                    alert(error)
                    console.log(error);
                })
            },
            //修改 保存按钮 保存选择的患者的信息
            saveModifyPatientInfo:function (patientId) {
                var patientDob = $('#modifyPatientBob').val();
                // alert(patientDob)
                let form=new FormData();
                form.append("patientId",patientId);
                form.append("userId",this.modifyPatientDetail.userId);
                form.append("patientName",this.modifyPatientDetail.patientName);
                form.append("patientDob",patientDob);
                form.append("blood",this.modifyPatientDetail.blood);
                form.append("sex",this.modifyPatientDetail.sex);
                form.append("maritalStatus",this.modifyPatientDetail.maritalStatus);
                form.append("nationality",this.modifyPatientDetail.nationality);
                form.append("nativePlace",this.modifyPatientDetail.nativePlace);
                form.append("documentNo",this.modifyPatientDetail.documentNo);
                form.append("homeAddress",this.modifyPatientDetail.homeAddress);
                form.append("nowAddress",this.modifyPatientDetail.nowAddress);
                form.append("phone",this.modifyPatientDetail.phone);
                form.append("email",this.modifyPatientDetail.email);
                form.append("height",this.modifyPatientDetail.height);
                form.append("weight",this.modifyPatientDetail.weight);
                form.append("workCompanyName",this.modifyPatientDetail.workCompanyName);
                form.append("workCompanyPhone",this.modifyPatientDetail.workCompanyPhone);
                form.append("positionName",this.modifyPatientDetail.positionName);
                form.append("emergencyContactPhoneNo",this.modifyPatientDetail.emergencyContactPhoneNo);
                form.append("emergencyContactName",this.modifyPatientDetail.emergencyContactName);
                form.append("emergencyContactRelationship",this.modifyPatientDetail.emergencyContactRelationship);
                axios({
                    url:"/oms/patient/updatePatient",
                    method:"post",
                    data:form
                }).then(function (res) {
                    if (res.data=='ok'){
                        alert("修改成功！！！")
                        location.reload();
                    }else {
                        alert(res.data)
                    }
                }).catch(function(error){
                    //失败运行这里,输出错误信息
                    alert(error)
                    console.log(error);
                })
            },
            //修改 取消按钮
            cancelModifyPatientInfo:function () {
                this.modifySelectPatientInfo();
            },
            // 修改 血型选择
            checkBloodChangBlood:function (blood) {
                this.modifyPatientDetail.blood = blood;
            },
            // 修改 性别选择
            checkSexChangeSex:function (sex) {
                if (sex==0){
                    this.modifyPatientDetail.sex = 0;
                    this.modifyPatientDetail.sexName = '男';
                }
                if (sex==1){
                    this.modifyPatientDetail.sex = 1;
                    this.modifyPatientDetail.sexName = '女';
                }
                if (sex==2){
                    this.modifyPatientDetail.sex = 2;
                    this.modifyPatientDetail.sexName = '未知';
                }
            },
            // 修改 婚姻状况选择
            checkMaritalChangeMarital:function (marital) {
                if (marital==0){
                    this.modifyPatientDetail.maritalStatus = 0;
                    this.modifyPatientDetail.maritalStatusName = '未婚';
                }
                if (marital==1){
                    this.modifyPatientDetail.maritalStatus = 1;
                    this.modifyPatientDetail.maritalStatusName = '已婚';
                }
                if (marital==2){
                    this.modifyPatientDetail.maritalStatus = 2;
                    this.modifyPatientDetail.maritalStatusName = '离偶';
                }
                if (marital==3){
                    this.modifyPatientDetail.maritalStatus = 3;
                    this.modifyPatientDetail.maritalStatusName = '离婚';
                }
                if (marital==4){
                    this.modifyPatientDetail.maritalStatus = 4;
                    this.modifyPatientDetail.maritalStatusName = '其他';
                }
            },
            // 删除患者信息
            deletePatient:function (patientId) {
                axios({
                    url:"/oms/patient/deletePatient/"+patientId,
                    method:"get",
                }).then(function (res) {
                    if (res.data=='ok'){
                        alert("删除成功！！！")
                        location.reload();
                    }else {
                        alert(res.data)
                    }
                }).catch(function(error){
                    //失败运行这里,输出错误信息
                    alert(error)
                    console.log(error);
                })
            }

        },
        created:function () {
            this.selectPatientListButton();
        }
    })

</script>

</body>
</html>
